<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Theme style -->
    <link rel="stylesheet" href="./css/adminlte.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" href="index.html">
                    <i class="fa fa-paper-plane"></i>
                    <span>博客前台首页</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <h1>
            <a href="index.html" class="brand-link">
                <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">俊俊博客</span>
            </a>
        </h1>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">仪表盘</li>
                    <li class="nav-item">
                        <a href="dashboard.html" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>仪表盘</p>
                        </a>
                    </li>
                    <li class="nav-header">博客编辑</li>
                    <li class="nav-item">
                        <a href="edit.html" class="nav-link">
                            <i class="nav-icon fas fa-edit"></i>
                            <p>发布博客</p>
                        </a>
                    </li>
                    <li class="nav-header">管理模块</li>
                    <li class="nav-item">
                        <a href="ztshares-mgr.html" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            <p>今日涨停列表</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="category-mgr.html" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="tag-mgr.html" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>标签管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="record-list.html" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            <p>操作记录</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="share-mgr.html" class="nav-link active">
                            <i class="fa fa-comments nav-icon"></i>
                            <p>股票管理</p>
                        </a>
                    </li>
                    <li class="nav-header">系统管理</li>
                    <li class="nav-item">
                        <a href="configuration.html"
                           class="nav-link">
                            <i class="fa fa-wrench nav-icon"></i>
                            <p>系统配置</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fa fa-sign-out-alt nav-icon"></i>
                            <p>安全退出</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- /.col -->
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">数据列表</h3>
                        </div>
                        <!-- /.card-header -->
                        <div>
                            <div id="toolbar">
                                <button class="btn btn-default">添加</button>
                                <button class="btn btn-default">修改</button>
                                <button class="btn btn-default">删除</button>
                                <!--                                        <button class="btn btn-default">批量导入</button>-->
                                <button type="button" class="btn btn-default" data-toggle="modal"
                                        data-target="#myModal" title="批量导入" id="upload">
                                    <i class="fa fa-ban"></i> 批量导入
                                </button>
                            </div>
                        </div>
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">批量导入</h4>
                                    </div>

                                    <div class="modal-body">
                                        <form enctype="multipart/form-data">
                                            <div class="form-group">
                                                <input id="file-1" type="file" name="excelFile" class="file"
                                                       data-overwrite-initial="false"
                                                       data-min-file-count="1">
                                            </div>
                                        </form>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-outline" data-dismiss="modal">保存
                                            </button>
                                        </div>

                                    </div>

                                </div>
                                <!-- /.modal-content -->
                            </div>

                            <!-- /.modal-dialog -->
                        </div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-bordered table-hover text-nowrap" id="dataShow"
                                   data-search="true"/>
                        </div>
                        <!-- /.card-body -->

                    </div>
                    <!-- /.card -->
                </div>
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!--  <footer class="main-footer">-->
    <!--    <p class="text-center mb-1">-->
    <!--      Copyright © 2020 Liam Designed by Liam Powered by AdminLTE-->
    <!--    </p>-->
    <!--    <p class="text-center">-->
    <!--      <a href="">粤ICP备20040058号</a>-->
    <!--    </p>-->
    <!--  </footer>-->
</div>
<!-- ./wrapper -->

<div class="modal fade" id="replyCommentModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">收藏</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post">
                    <div class="form-row">
                        <div class="form-group col-md-6" id="id1">
                            <label for="id">ID</label>
                            <input type="text" class="form-control" id="id" name="id">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="shareCode">代码</label>
                            <input type="text" class="form-control" id="shareCode" name="shareCode">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="shareName">名字</label>
                            <input type="text" class="form-control" id="shareName" name="shareName">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="scope">总市值</label>
                            <input type="text" class="form-control" id="scope" name="scope">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="industryId">所属行业</label>
                            <input type="text" class="form-control" id="industryId" name="industryId">
                        </div>
                    </div>
                  <div class="form-group">
                    <label for="reason">入选理由</label>
                    <textarea class="form-control" id="reason" rows="3" name="reason"></textarea>
                  </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="submitFavorite()" class="btn btn-success">确认</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="deleteCommentModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除评论</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="m-0">你确定要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="deleteCategoryBtn" type="button" class="btn btn-danger">删除</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="./plugins/jquery/upload/css/fileinput.css">
<script type="text/javascript" src="./plugins/jquery/upload/js/fileinput.js"></script>
<script type="text/javascript" src="./plugins/jquery/upload/js/locales/zh.js"></script>

<!-- AdminLTE App -->
<script src="./js/adminlte.min.js"></script>
<link rel="stylesheet" href="/plugins/bootstrap-table/bootstrap-table.css"/>
<script src="./js/adminlte.min.js"></script>
<script src="/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>


<script>
    //页面功能实现
    $(function () {
        //开始装载数据
        $("#dataShow").bootstrapTable({
            url: "/trade/getAllShares",
            sortName: "id",//排序列
            striped: true,//條紋行
            toolbar: '#toolbar',
            // toolbarAlign:'right',
            sidePagination: "client",//服务器分页
            showRefresh: false,//刷新功能
            clickToSelect: false,//选择行即选择checkbox
            singleSelect: true,//仅允许单选
            pagination: true,//启用分页
            pageCount: 10,//每页行数
            pageIndex: 0,//起始页
            pageList: [10, 25, 50, 100],//可供选择的每页的行数
            escape: true,//过滤危险字符
            queryParams: getParams,//携带参数
            dataType: "json",
            columns: [
                {
                    checkbox: true  //第一列显示复选框
                },{
                    title: 'ID',
                    field: 'id',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '名称',
                    field: 'shareName',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '代码',
                    field: 'shareCode',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '价格',
                    field: 'price',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '总市值',
                    field: 'scope',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value / 100000000 + "亿";
                    }
                },
                {
                    title: 'TTM市盈率（%）',
                    field: 'ttmpe',
                    align: 'center',
                },
                {
                    title: '净利润',
                    field: 'netProfit',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value / 100000000 + "亿";
                    }
                },
                {
                    title: '市净率',
                    field: 'bookRatio',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value + "%";
                    }
                },
                {
                    title: '每股盈利',
                    field: 'perShare',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '所属行业',
                    field: 'industryId',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '细分行业',
                    field: 'bkId',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '5日涨幅',
                    field: 'fiveIncrease',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value * 100 + "%";
                    }
                },
                {
                    title: '10日涨幅',
                    field: 'tenIncrease',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value * 100 + "%";
                    }
                },
                {
                    title: '20日涨幅',
                    field: 'twentyIncrease',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value * 100 + "%";
                    }
                },
                {
                    title: '年初至今',
                    field: 'yearIncrease',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return value * 100 + "%";
                    }
                },
                {
                    title: '上市日期',
                    field: 'startDate',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<a href="#" mce_href="#" onclick="addFavorite(\'' + row.id + '\')">加入收藏</a> '
                            ;
                    }
                }
            ],
            onLoadSuccess: function (ee) {
                //查询数据成功
                console.info(ee);

            }
        });
    });

    //默认加载时携带参数
    function getParams(parm) {
        return {page: (parm.offset / parm.limit) + 1, rows: 10};
    }

    initFileInput("/trade/importShares");
    document.getElementById("id1").style.display = "none";

    function initFileInput(uploadUrl) {
        var control = $("#file-1");
        control.fileinput({
            language: 'zh',
            uploadUrl: uploadUrl, // 上传你的地址
            uploadAsync: true, //默认异步上传
            showCaption: true,//是否显示标题
            allowedFileExtensions: ['xls', 'xlsx'],//接收文件的后缀
            showUpload: true,//是否显示上传按钮
            overwriteInitial: false,
            enctype: 'multipart/form-data',
            showPreview: true,
            browseClass: "btn btn-primary", //按钮样式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            maxFileSize: 15000,
            maxFilesNum: 10,
            layoutTemplates: {
                actionDelete: "",//去除上传预览缩略图中的删除按钮的缩略图标。
                actionUpload: "", //去除上传预览缩略图中的上传按钮的缩略图标。
                actionZoom: ""   //去除上传预览缩略图中的查看详情预览的缩略图标。
            },
            //allowedFileTypes: ['image', 'video', 'flash'],
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on("filebatchselected", function (event, files) {
            console.log(event);
            console.log(files);

        }).on("fileuploaded", function (event, data, previewId, index) {
            if (data.response) {
                alert('上传完成!本次上传行数[ ' + (data.response.code) + " ]");
                setTimeout(function () {
                    $('#myModal').modal('hide');
                }, 1000)

            }
        }).on("fileerror", function (event, data, msg) {
            console.log(event);
            console.log(data);
            console.log(msg);
            alert("上传失败了！");
        });
    }


    function addFavorite(id) {
        let data = $("#dataShow").bootstrapTable('getSelections');
        // console.log("打印数据===》"+data[0].shareCode);
        $("#id").val(data[0].id);
        $("#shareCode").val(data[0].shareCode);
        $("#shareName").val(data[0].shareName);
        $("#scope").val(data[0].scope);
        $("#industryId").val(data[0].industryId);
        $('#replyCommentModal').modal('show');
    }
    function submitFavorite() {
        var opt = {
            id:$("#id").val(),
            status: $("#status").val(),
            reason: $("#reason").val()
        };
        console.log(JSON.stringify(opt))
        //提交ajax请求
        $.ajax({
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            // contentType: "application/x-www-form-urlencoded",
            //请求地址
            url: "/trade/addFavorite",
            //数据，json字符串
            data: JSON.stringify(opt),
            //请求成功
            success: function (result) {
                if (result == "USER_NOT_EXIST") {
                    alert("保存失败！")
                } else {
                    alert("保存成功！")
                    window.location.href = "index.html";
                }
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
            }
        });
    }      
</script>
</body>
</html>
